<template>
  <div class="analysis">
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="本周开机率" total="80.00%">
          <a-tooltip
            title="开机率衡量企业产能利用水平。开机率 = 运行时间/计划时间；计划时间 = 日历工作时间-计划停机时间；运行时间 = 计划时间-故障停机时间-设备换模时间（包括更换产品规格、更换工装模具、更换刀具等活动所用时间）"
            slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer" style="white-space: nowrap;overflow: hidden">
            <trend style="margin-right: 16px" term="同比" :percent="12" :is-increase="true" :scale="0" />
            <trend term="环比" :target="100" :value="89" :scale="0" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="本周合格率" total="90.00%">
          <a-tooltip title="衡量企业质量控制水平。合格品率 = 合格品数量/ 加工数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer" style="white-space: nowrap;overflow: hidden">
            <trend style="margin-right: 16px" term="同比" :percent="12" :is-increase="true" :scale="0" />
            <trend term="环比" :target="100" :value="89" :scale="0" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="本周节拍达成率" total="60.00%">
          <a-tooltip title="衡量企业生产效率水平。节拍达成率 = 实际节拍/标准节拍" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer" style="white-space: nowrap;overflow: hidden">
            <trend style="margin-right: 16px" term="同比" :percent="12" :is-increase="true" :scale="0" />
            <trend term="环比" :target="100" :value="89" :scale="0" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="本周OEE" total="42.20%">
          <a-tooltip title="OEE是生产管理综合指标。OEE=开机率×节拍达成率×合格品率" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer" style="white-space: nowrap;overflow: hidden">
            <trend style="margin-right: 16px" term="同比" :percent="12" :is-increase="true" :scale="0" />
            <trend term="环比" :target="100" :value="89" :scale="0" />
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{ padding: '24px' }">
      <div class="salesCard">
        <a-tabs default-active-key="OEE" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrap" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>日</a>
              <a>周</a>
              <a>月</a>
              <a>年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }"></a-range-picker>
          </div>
          <a-tab-pane loading="true" tab="OEE" key="OEE">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="开机率" key="开机率">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="合格率" key="合格率">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="节拍达成率" key="节拍达成率">
            <bar />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/card/ChartCard'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/chart/Trend'

export default {
  data() {
    return {
      loading: true
    }
  },
  created() {
    setTimeout(() => this.loading = !this.loading, 1000)
  },
  components: { Trend, Bar, ChartCard }
}
</script>

<style lang="less" scoped>
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}

@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}
</style>
